<template>
  <div class="source">
    <el-row :gutter="20">
      <el-col
       :span="24/listTotal"
       style="padding:0 10px 0 0;"
       v-for="(item, index) in listData"
       :key="index"
      >
        <cascade-panel
         :label="item.label"
         :editUrl="item.editUrl"
         :addUrl="item.addUrl"
         :parentId="item.id"
         :level="item.level"
         :listTotal="listTotal"
         @onChange="onChange"
         @onClear="onClear"
         @deleteItem="deleteItem"
         @getListData="getListData"
         :clear="item.clear"
         :keep="isKeep"
         :ref="'panel' + item.level"
        ></cascade-panel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getList, categoryDelete } from '@/api/category'
import CascadePanel from '../../components/cascadePanel.vue'
import { cloneDeep } from 'lodash'
export default {
  name: 'Categoryindex',
  components: { CascadePanel },
  data () {
    return {
      listData: [
        { label: '前台类目I', editUrl: 'oneCategory', addUrl: 'oneCategory', id: 0, level: 0, clear: false },
        { label: '前台类目II', editUrl: 'twoCategory', addUrl: 'twoCategory', id: null, level: 1, clear: false },
        { label: '前台类目III', editUrl: 'threeCategory', addUrl: 'threeCategory', id: null, level: 2, clear: false }
      ],
      listTotal: 3,
      isKeep: false,
      loadingText: 'loading'
    }
  },
  beforeRouteLeave (to, from, next) {
    const leave = !(to.meta && (to.meta.parentTitle === '前台类目' || to.meta.title === '前台类目'))
    if (leave) {
      for (let level = 0; level < this.listTotal; level++) {
        sessionStorage.removeItem('select' + level)
      }
    }
    next()
  },
  mounted () {
    const keep = this.$route.params.keep
    if (keep) {
      this.isKeep = keep
    }
  },
  methods: {
    getListData (parentId, level) {
      const thisData = this.$refs['panel' + level][0]
      getList(parentId).then(res => {
        if (res) {
          if (Number(res.code) === 1) {
            thisData.listData = res.obj
            thisData.startData = cloneDeep(res.obj)
          } else {
            this.$alert(this.$t(res.code))
          }
          thisData.listLoading = false
        }
      }).catch(() => {
        thisData.listLoading = false
      })
    },
    onChange (id, level) {
      this.listData[level].id = id
      this.listData.forEach(item => {
        if (item.level > level) {
          item.clear = true
        }
      })
    },
    onClear (level, clear = false) {
      this.listData[level].clear = clear
      this.listData[level].id = null
    },
    deleteItem (id, level) {
      const sonData = Number(level + 1) < this.listTotal ? this.$refs['panel' + Number(level + 1)][0] : null
      const thisData = this.$refs['panel' + level][0]
      if ((sonData && sonData.count === 0) || Number(level + 1) === this.listTotal) {
        thisData.listLoading = true
        categoryDelete(id).then(res => {
          if (res) {
            if (Number(res.code) === 1) {
              this.$alert('删除成功')
              thisData.updateList()
            } else {
              this.$alert(this.$t(res.code))
            }
            thisData.listLoading = false
          }
        }).catch(() => {
          thisData.listLoading = false
        })
      } else {
        this.$alert('请先删除该目录下的子类目')
        thisData.listLoading = false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
